<template>
  <!--        底部菜单部分-->
  <ul class="footer">
    <li  @click="toHome">
      <img src="../../assets/icons/footer/zhuye.png">
      <p>首页</p>
    </li>
    <li @click="toBusinessList">
      <img src="../../assets/icons/footer/zhinan.png">
      <p>发现</p>
    </li>
    <li @click="toOrderList">
      <img src="../../assets/icons/footer/dingdan.png">
      <p>订单</p>
    </li>
    <li @click="toLogin">
      <img src="../../assets/icons/footer/wode.png">
      <p>我的</p>
    </li>

  </ul>
</template>

<script>
import {useRouter} from "vue-router";
import {getSessionStorage} from "../../main.js";
import {getCurrentInstance} from "vue";

export default {
  name: "Footer",
  setup(){
    const router = useRouter();
    let internalInstance = getCurrentInstance();

    let message=internalInstance.appContext.config.globalProperties.$message

    function toHome(){
      router.push(`/home`);

    }
    function toBusinessList(){
      router.push(`/businessList`);

    }
    function toLogin(){
      if(getSessionStorage('user')!==null){
        router.push(`/user`);
      }else{
        message.error("未登录或者登录失效")
        router.push('/login')
      }

    }
    function toOrderList(){
      if(getSessionStorage('user')==null){
        message.error("未登录或者登录失效")
        router.push(`/Login`);
      }else{

        router.push('/orderList')
      }
    }

    return {
      toHome,
      toBusinessList,
      toLogin,
      toOrderList
    }
  }
}
</script>

<style scoped>
/*底部菜单部分*/
 .footer{
  width: 100%;
  height: 14vw;
  border-top: #DDD;


  background-color: white;
  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
 .footer li{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}
 .footer li p{
  font-size: 4vw;

}
 .footer li img{
  width: 25px;
  height: 25px;
}
</style>